<template>
	<view v-if="isLoad">
		<view class="container">
			<navBar title="选择门店" background="transparent" :isBox="false"></navBar>
			<map class="map" show-location :latitude="latitude" :longitude="longitude" :markers="covers">
				<cover-view slot="callout">
					<block v-for="(item, index) in covers" :key="index">
						<cover-view :marker-id="item.id" class="cover_view">
							<cover-image class="cover_icon" src="/static/images/icon_water.png"></cover-image>
							<cover-image :src="item.mer_avatar" class="cover_img"></cover-image>
						</cover-view>
					</block>
				</cover-view>
			</map>
			<scroll-view class="list" scroll-y @scrolltolower="getList">
				<view class="current acea-row row-between-wrapper" v-if="list[current]">
					<view class="acea-row row-middle" @click="storeChange(current)">
						<text class="iconfont icon-weizhi"></text>
						{{ list[current].mer_name }}
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</view>
				<view class="title">附近门店</view>
				<view class="item" v-for="(item, index) in list" :key="index" @click="storeChange(index)">
					<view class="name">{{ item.mer_name }}</view>
					<view class="acea-row">
						<text class="iconfont icon-weizhi"></text>
						{{ item.mer_address }}
					</view>
					<view class="acea-row">
						<text class="iconfont icon-shijian1"></text>
						{{item.service_time}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	var _self;
	import navBar from '../components/navBar/index.vue';
	import {
		storeMerchantList
	} from '@/api/store';
	import {
		mapGetters
	} from "vuex";
	export default {
		computed: {
			...mapGetters(['routeError']),
		},

		components: {
			navBar
		},
		data() {
			return {
				longitude: '', //经度
				latitude: '', //维度
				loadend: false,
				loading: false,
				loadTitle: '加载更多',
				where: {
					page: 1,
					limit: 10
				},
				list: [],
				current: 0,
				covers: [],
				isLoad: false,
				mer_id: ''
			};
		},
		onLoad(options) {
			if(this.routeError) {
				this.$store.commit('GO_ERROR');
				return
			}
			_self = this;
			_self.mer_id = options.mer_id || '';
			_self.getList();
		},
		methods: {
			storeChange(index) {
				_self.current = index;
				_self.$nextTick(() => {
					uni.$emit('merChange', _self.list[_self.current]);
					uni.navigateBack({
						delta: 1
					});
				});
			},
			getList() {
				if (_self.loadend) return;
				if (_self.loading) return;
				_self.loading = true;
				_self.loadTitle = '';
				storeMerchantList(_self.where)
					.then(res => {
						const {
							count,
							list
						} = res.data;
						let new_list = _self.$util.SplitArray(list, _self.list);
						let loadend = list.length < _self.where.limit;
						_self.loadend = loadend;
						_self.loading = false;
						_self.loadTitle = loadend ? '已全部加载' : '加载更多';
						_self.$set(_self, 'list', new_list);
						_self.$set(_self.where, 'page', _self.where.page + 1);
						if (_self.mer_id) {
							_self.current = _self.list.findIndex(val => {
								return val.mer_id == _self.mer_id;
							});
						}
						if (_self.list.length) {
							_self.longitude = _self.list[_self.current].long;
							_self.latitude = _self.list[_self.current].lat;
						}
						_self.list.forEach(item => {
							var obj = {
								id: item.mer_id,
								latitude: item.lat,
								longitude: item.long,
								mer_avatar: item.mer_avatar,
								// #ifdef H5
								iconPath: item.mer_avatar,
								// #endif
								customCallout: {
									display: 'ALWAYS',
									anchorX: 0,
									anchorY: 40
								},
								width: 40,
								height: 40,
								callout: {
									borderRadius: 50
								}
							};
							_self.covers.push(obj);
							if (_self.where.page == 2) {
								_self.isLoad = true;
							}
						});
					})
					.catch(err => {
						_self.loading = false;
						_self.loadTitle = '加载更多';
					});
			}
		}
	};
</script>

<style lang="scss">
	page,
	.container {
		width: 100%;
		height: 100%;
	}

	.map {
		width: 100%;
		height: 640rpx;
	}

	.list {
		height: calc(100% - 640rpx);
		padding: 20rpx 30rpx;
		background: #fff;

		.current {
			line-height: 1;
			color: #55ae82;
			padding-bottom: 20rpx;
			border-bottom: dashed 1rpx #cbcbcb;

			.iconfont {
				display: inline-block;
			}

			.icon-xiangyou {
				font-size: 24rpx;
				margin-left: 10rpx;
			}
		}

		.title {
			color: #888;
			line-height: 1;
			padding: 30rpx 0;
		}

		.item {
			border-bottom: solid 1rpx #cbcbcb;
			margin-bottom: 20rpx;
			padding-bottom: 10rpx;

			&:last-child {
				border-bottom: none;
			}

			.name {
				color: #333;
				margin-bottom: 15rpx;
			}

			.acea-row {
				color: #888;
				line-height: 1.2;
				margin-bottom: 10rpx;

				.iconfont {
					color: #888;
					font-size: 28rpx;
					position: relative;
					display: inline-block;
					margin-right: 10rpx;
				}
			}
		}
	}

	.cover_view {
		width: 118rpx;
		height: 118rpx;
		display: block;
		position: relative;

		.cover_icon {
			width: 118rpx;
			height: 118rpx;
			position: relative;
			z-index: 2;
		}

		.cover_img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			display: block;
			position: absolute;
			z-index: 9;
			top: 10rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>
